import React, { useState } from 'react';
import {
  Box, Grid, Typography, Button, Paper, Chip,
  List, ListItem, ListItemText, ListItemIcon, Divider,
  IconButton, Tooltip
} from '@mui/material';
import { Add, Edit, Pause, Archive, Event, Upload, Update } from '@mui/icons-material';

const mockProjects = [
  {
    id: 1,
    name: '数据操作控制项目',
    owner: '张经理',
    startDate: '2025-01-15',
    endDate: '2025-06-30',
    progress: 65,
    status: '正常',
    color: '#4caf50',
  },
  {
    id: 2,
    name: '智能评估系统开发',
    owner: '李工程师',
    startDate: '2025-02-01',
    endDate: '2025-05-15',
    progress: 40,
    status: '延期',
    color: '#ff9800',
  },
  {
    id: 3,
    name: '数字化能力评估模型优化',
    owner: '王分析师',
    startDate: '2025-03-01',
    endDate: '2025-07-30',
    progress: 25,
    status: '已暂停',
    color: '#9e9e9e',
  },
  {
    id: 4,
    name: '领导驾驶舱功能扩展',
    owner: '赵总监',
    startDate: '2025-04-10',
    endDate: '2025-08-15',
    progress: 15,
    status: '正常',
    color: '#3f51b5',
  },
];

const ganttPhases = [
  { name: '需求分析', progress: 100 },
  { name: '系统设计', progress: 100 },
  { name: '开发实现', progress: 80 },
  { name: '测试部署', progress: 0 },
];

export default function ProjectDashboard() {
  const [selectedProject, setSelectedProject] = useState(mockProjects[1]);

  return (
    <Box sx={{ background: '#0f2a43', minHeight: '100vh', color: '#fff', p: 3 }}>
      <Grid container spacing={3}>
        {/* 左侧项目列表 */}
        <Grid item xs={4}>
          <Typography variant="h6" gutterBottom>项目列表</Typography>

          <Box mb={2}>
            <Button variant="contained" startIcon={<Add />} sx={{ mr: 1 }}>新增项目</Button>
            <Button variant="outlined" startIcon={<Edit />} sx={{ mr: 1 }}>编辑项目</Button>
            <Button variant="contained" color="warning" startIcon={<Pause />} sx={{ mr: 1 }}>暂停项目</Button>
            <Button variant="contained" color="error" sx={{ mr: 1 }}>延期项目</Button>
            <Button variant="contained" color="success" startIcon={<Archive />}>归档项目</Button>
          </Box>

          <List>
            {mockProjects.map((project) => (
              <ListItem
                key={project.id}
                button
                onClick={() => setSelectedProject(project)}
                sx={{
                  backgroundColor: selectedProject.id === project.id ? '#1e3a5f' : 'transparent',
                  borderRadius: 1,
                  mb: 1
                }}
              >
                <ListItemIcon>
                  <Event sx={{ color: project.color }} />
                </ListItemIcon>
                <ListItemText
                  primary={project.name}
                  secondary={`进度: ${project.progress}%`}
                  primaryTypographyProps={{ color: '#fff' }}
                  secondaryTypographyProps={{ color: '#90caf9' }}
                />
                <Chip label={project.status} size="small" sx={{ background: project.color, color: '#fff' }} />
              </ListItem>
            ))}
          </List>
        </Grid>

        {/* 右侧项目详情 */}
        <Grid item xs={8}>
          <Paper sx={{ p: 3, background: '#102c4c' }}>
            <Typography variant="h6">{selectedProject.name}</Typography>
            <Typography variant="body2" sx={{ mb: 1 }}>
              负责人：{selectedProject.owner} ｜ 开始日期：{selectedProject.startDate} ｜ 截止日期：{selectedProject.endDate}
            </Typography>
            <Chip label={selectedProject.status} sx={{ background: selectedProject.color, color: '#fff' }} />

            {/* 甘特图模拟 */}
            <Box mt={3}>
              <Typography variant="subtitle1">项目时间线（甘特图）</Typography>
              {ganttPhases.map((phase, idx) => (
                <Box key={idx} sx={{ mt: 1 }}>
                  <Typography variant="body2">{phase.name}</Typography>
                  <Box
                    sx={{
                      background: '#2c3e50',
                      borderRadius: 1,
                      overflow: 'hidden',
                      height: 12,
                      mt: 0.5
                    }}
                  >
                    <Box
                      sx={{
                        width: `${phase.progress}%`,
                        background: phase.progress >= 100 ? '#4caf50' : '#ff9800',
                        height: '100%',
                      }}
                    />
                  </Box>
                </Box>
              ))}
            </Box>

            {/* 进度跟踪 */}
            <Box mt={4}>
              <Typography variant="subtitle1">进度跟踪与更新</Typography>
              <Box mt={1} display="flex" gap={2}>
                <Button variant="contained" startIcon={<Update />}>添加进度</Button>
                <Button variant="contained" startIcon={<Upload />}>上传证明材料</Button>
              </Box>

              <Box mt={2}>
                <Typography variant="body2" sx={{ color: '#81d4fa' }}>
                  ✓ 完成系统设计文档（2025-03-15，李工程师）
                </Typography>
                <Typography variant="body2" sx={{ color: '#f44336' }}>
                  ⚠ 开发进度延期，原因：外部接口变更（2025-04-10，李工程师）
                </Typography>
              </Box>
            </Box>
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
}
